<template>
  <div class="table_container">
    <el-table :data="questionsData" stripe style="width: 100%" v-loading="loading">
      <el-table-column prop="number" label="试题编号" />
      <el-table-column prop="subject" label="学科" />
      <el-table-column prop="catalog" label="目录" />
      <el-table-column label="题型">
        <template v-slot="{ row }">
          {{ questionType(row.questionType) }}
        </template>
      </el-table-column>
      <el-table-column prop="question" label="题干" width="280px">
        <template v-slot="{ row }">
          <div v-html="row.question"></div>
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" />
      <el-table-column label="难度">
        <template v-slot="{ row }">
          {{ diffType(row.difficulty) }}
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" />
      <el-table-column label="操作" width="200px">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            icon="el-icon-view"
            circle
            plain
            @click="preShow(row)"
          ></el-button>
          <el-button
            type="success"
            icon="el-icon-edit"
            circle
            plain
            @click="toNewQuest(row)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            plain
            @click="del(row)"
          ></el-button>
          <el-button
            type="warning"
            icon="el-icon-check"
            plain
            circle
            @click="addChoice(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 页尾 -->
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="questObj.page"
        :page-sizes="[2, 5, 10, 15, 20]"
        :page-size="questObj.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 弹出层 -->
    <QuestionsPre
      ref="dialogRef"
      :showDialog.sync="showDialog"
      :preId="preId"
    />
  </div>
</template>

<script>
import { list, remove, choiceAdd } from '../../api/hmmm/questions'
import { questionType, difficulty } from '../../api/hmmm/constants'
import QuestionsPre from '../../module-hmmm/components/questions-preview.vue'
export default {
  props: {
    total: {
      type: [Number, String]
    },
    questionForm: {
      type: Object
    }
  },
  data () {
    return {
      loading: false,
      questionsData: [],
      questObj: {
        page: 1,
        pagesize: 5
      },
      showDialog: false,
      preId: null
    }
  },
  components: {
    QuestionsPre
  },
  created () {
    this.getQuestions()
  },
  methods: {
    // 编辑试题
    toNewQuest (row) {
      this.$router.push({ path: '/questions/new', query: { id: row.id } })
    },
    // 加入精选
    async addChoice (row) {
      try {
        await this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        row = {
          ...row,
          choiceState: 1
        }
        await choiceAdd(row)
        this.$message.success('加入成功')
        this.getQuestions(this.questObj)
      } catch {
        this.$message.error('加入失败')
      }
    },
    // 弹出层
    preShow (row) {
      this.showDialog = true
      this.preId = row.id
      this.$refs.dialogRef.getDetail(row)
    },
    // 删除
    async del (row) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(row)
        await this.getQuestions()
        this.$message.success('删除成功')
      } catch (e) {
        this.$message.error('删除失败')
      }
    },
    // 分页
    async handleSizeChange (size) {
      this.questObj.pagesize = size
      this.getQuestions()
    },
    async handleCurrentChange (page) {
      this.questObj.page = page
      this.getQuestions()
    },
    // searchPage () {
    //   this.questObj.page = 1
    // },
    // 获取列表
    async getQuestions () {
      try {
        this.loading = true
        const { data } = await list({
          ...this.questObj,
          ...this.questionForm
        })
        this.questionsData = data.items
        this.$emit('update:total', data.counts)
        this.loading = false
        this.$message.success('获取数据成功')
      } catch (e) {
        this.loading = false
        this.$message.error('获取数据失败')
      }
    },
    // 题型
    questionType (id) {
      const newArr = questionType.filter((item) => -item.value === -id)
      return newArr[0].label
    },
    // 难度
    diffType (id) {
      const newArr = difficulty.filter((item) => -item.value === -id)
      return newArr[0].label
    }
  }
}
</script>

<style lang="less" scoped>
.table_container {
  .page {
    float: right;
    margin: 20px 0;
  }
}
</style>
